<template>
  <view class="withdraw container page-box">
    <!-- 提现 -->
    <view>到账微信账号</view>
    <view class="withdraw-info">
      <u-cell-group :border="false">
        <u-cell :isLink="true" :border="false">
          <template slot="icon">
            <u-avatar size="122rpx" :src="avatar" />
          </template>

          <template slot="title">
            <view class="user">
              <view class="username">{{ realName }}</view>
              <view class="tooltip">立即到账</view>
            </view>
          </template>
        </u-cell>
      </u-cell-group>
    </view>

    <view class="withdraw-content sizing-border">
      <view style="margin-bottom: 20rpx">提现金额</view>
      <view class="price flex items-center justify-between">
        <view class="price-icon">¥</view>
        <u-input v-model="price" type="number" :border="false" />
        <view class="price-input">
          <view class="color-theme" style="text-align: right">全部提现</view>
          <view class="text">可提余额¥ 4500</view>
        </view>
      </view>
      <view class="price-tips">可提现金额¥4500</view>
    </view>

    <button
      class="circle-button btn-active"
      style="width: 90%"
      @click="$jump('/subPages/user/technician/money/withdraw-success')"
    >
      提交
    </button>
  </view>
</template>

<script>
import infoMixin from "@/common/mixins/info";
export default {
  mixins: [infoMixin],
  data() {
    return {
      price: "",
    };
  },
};
</script>

<style lang="scss" scoped>
.withdraw {
  position: relative;

  button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: constant(safe-area-inset-bottom) !important;
    bottom: env(safe-area-inset-bottom) !important;
  }

  .user {
    margin-left: 20rpx;

    .username {
      font-weight: bold;
      font-size: 38rpx;
      color: #333333;
    }

    .tooltip {
      font-size: 30rpx;
      color: #666;
    }
  }

  &-content {
    height: 294rpx;
    background: #ffffff;
    box-shadow: 0rpx 6rpx 18rpx 1rpx rgba(209, 209, 209, 0.4);
    border-radius: 15rpx;
    margin-top: 30rpx;
    padding: 30rpx;

    .price {
      padding-bottom: 20rpx;
      border-bottom: 1px solid #e3e3e3;
      &-icon {
        font-weight: 800;
        font-size: 52rpx;
        color: #333333;
        margin-right: 30rpx;
      }
      &-input {
        .text {
          font-size: 24rpx;
          color: #d4d4d4;
          margin: 6rpx 0;
        }
      }
      &-tips {
        font-size: 26rpx;
        color: #999999;
        margin-top: 30rpx;
      }
    }
  }
}
</style>
